<template>
  <div class="footer-wrapper">
    <template v-for="item in links">
      <router-link :key="item.path" :to="item.path">
        <span>{{ item.text }}</span>
      </router-link>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      links: [
        {
          path: '/home',
          text: '首页',
          icon: '',
        },
        {
          path: '/classify',
          text: '分类',
          icon: '',
        },
        {
          path: '/cart',
          text: '购物车',
          icon: '',
        },
        {
          path: '/mine',
          text: '我的',
          icon: '',
        },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.footer-wrapper {
  display: flex;
  height: 1rem;
  a {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
